<script id="harform-tpl" type="text/template">
    <div class="row">
        <div class="col-md-12">
            <form class="form-inline">
                <div class="form-group">
                    <label for="har_name">Har Name</label>
                    <input  style="width:250px;" type="text" class="form-control" id="har_name" placeholder="Har Name" value="{@if har_name}${har_name}{@/if}">
                </div>
                <div class="form-group" style="margin-left:20px;"  >
                    <label for="har_name">Har Id</label>
                    <input readonly style="width:300px;"  type="text" class="form-control" id="har_id" placeholder="Har Id" value="{@if har_id}${har_id}{@/if}">
                </div>
                {@if har_name}
                <div  class="form-group" style="margin-left:20px">
                    <a class="deleteHarBtn"  data-id="${har_id}">
                        <span class="glyphicon glyphicon-trash"></span>
                    </a>
                </div>
                {@/if}
            </form>
        </div>

    </div>

    <div id="top-ops" class="row">
            <select name="method" style="width:100px;display: inline-block" class="form-control">
                <option value="GET" {@if method==="GET"} selected {@/if}>GET</option>
                <option value="POST" {@if method==="POST"} selected {@/if}>POST</option>
            </select>

            <input style="width:400px;max-width:500px;display: inline-block" name="url" value="${url}" placeholder="输入url" class="form-control">

            <a id="queryBtn"  style="width:140px;display: inline-block" class="btn btn-default" href="javascript:void(0);">
                <i class="glyphicon glyphicon-link"></i>
                &nbsp;<span>URL Params</span>
            </a>
            <a id="headerBtn" style="width:120px;display: inline-block" class="btn btn-default" href="javascript:void(0);">
                <i class="glyphicon glyphicon-menu-hamburger"></i>
                &nbsp;<span>Headers</span>
            </a>
            <a id="cookieBtn" style="width:120px;display: inline-block" class="btn btn-default" href="javascript:void(0);">
                <i class="glyphicon glyphicon-menu-hamburger"></i>
                &nbsp;<span>Cookies</span>
            </a>

        <!--<a id="queryBtn"  style="width:140px;display: inline-block" class="btn btn-default" href="javascript:void(0);">-->
            <!--<i class="glyphicon glyphicon-link"></i>-->
            <!--&nbsp;<span>URL Params{@if queryString&&queryString.length!=0}(${queryString.length}){@/if}</span>-->
        <!--</a>-->
        <!--<a id="headerBtn" style="width:120px;display: inline-block" class="btn btn-default" href="javascript:void(0);">-->
            <!--<i class="glyphicon glyphicon-menu-hamburger"></i>-->
            <!--&nbsp;<span>Headers{@if headers&&headers.length!=0}(${headers.length}){@/if}</span>-->
        <!--</a>-->
        <!--<a id="cookieBtn" style="width:120px;display: inline-block" class="btn btn-default" href="javascript:void(0);">-->
            <!--<i class="glyphicon glyphicon-menu-hamburger"></i>-->
            <!--&nbsp;<span>Cookies{@if cookies&&cookies.length!=0}(${cookies.length}){@/if}</span>-->
        <!--</a>-->
    </div>


    <div class="row">
        <div class="col-md-6" id="left-content">
            <form id="query-form" name="queryString" class="form-inline">
                <h5>QueryString</h5>
                {@each queryString as q}
                <div class="form-group pair">
                    <div class="input-group multi">
                        <input type="text" name="name" value="${q.name}" class="form-control no-border-input">
                        <input type="text" name="value" value="${q.value}"  class="form-control no-border-input">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-success">
                                <i class="glyphicon glyphicon-plus-sign"></i>
                            </button>
                            <button type="button" class="btn btn-danger">
                                <i class="glyphicon glyphicon-remove-sign"></i>
                            </button>
                        </span>
                    </div>
                </div>
                {@/each}
                <div class="form-group pair">
                    <div class="input-group multi">
                        <input type="text" name="name" placeholder="name"  class="form-control no-border-input">
                        <input type="text" name="value" placeholder="value" class="form-control no-border-input">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-success">
                                <i class="glyphicon glyphicon-plus-sign"></i>
                            </button>
                            <button type="button" class="btn btn-danger">
                                <i class="glyphicon glyphicon-remove-sign"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </form>




            <form id="header-form" name="headers" class="form-inline">
                <h5>Headers</h5>

                {@each headers as h}
                <div class="form-group pair" {@if h.name==="Content-Type"|| h.name==="Content-type" || h.name==="content-type" }  id="for-post-header" {@/if}>
                    <div class="input-group multi">
                        <input type="text" name="name" value="${h.name}" class="form-control no-border-input">
                        <input type="text" name="value" value="${h.value}" class="form-control no-border-input">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-success">
                                <i class="glyphicon glyphicon-plus-sign"></i>
                            </button>
                            <button type="button" class="btn btn-danger">
                                <i class="glyphicon glyphicon-remove-sign"></i>
                            </button>
                        </span>
                    </div>
                </div>
                {@/each}

                {@if headers==undefined || headers.length===0}
                <div class="form-group pair">
                    <div class="input-group multi">
                        <input type="text" name="name" value="Accept" placeholder="name" class="form-control no-border-input">
                        <input type="text" name="value" value="*/*" placeholder="value" class="form-control no-border-input">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-success">
                                    <i class="glyphicon glyphicon-plus-sign"></i>
                                </button>
                                <button type="button" class="btn btn-danger">
                                    <i class="glyphicon glyphicon-remove-sign"></i>
                                </button>
                            </span>
                    </div>
                </div>
                {@/if}

                <div class="form-group pair">
                    <div class="input-group multi">
                        <input type="text" name="name" placeholder="name" class="form-control no-border-input">
                        <input type="text" name="value" placeholder="value" class="form-control no-border-input">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-success">
                                <i class="glyphicon glyphicon-plus-sign"></i>
                            </button>
                            <button type="button" class="btn btn-danger">
                                <i class="glyphicon glyphicon-remove-sign"></i>
                            </button>
                        </span>
                    </div>
                </div>

            </form>


            <form id="cookie-form" name="cookies" class="form-inline">
                <h5>Cookies</h5>

                {@each cookies as c}
                <div class="form-group pair">
                    <div class="input-group multi">
                        <input type="text" name="name" value="${c.name}" required="" class="form-control no-border-input">
                        <input type="text" name="value" value="${c.value}" class="form-control no-border-input">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-success">
                            <i class="glyphicon glyphicon-plus-sign"></i>
                        </button>
                        <button type="button" class="btn btn-danger">
                            <i class="glyphicon glyphicon-remove-sign"></i>
                        </button>
                    </span>
                    </div>
                </div>
                {@/each}
                <div class="form-group pair">
                    <div class="input-group multi">
                        <input type="text" name="name" placeholder="name" required="" class="form-control no-border-input">
                        <input type="text" name="value" placeholder="value" class="form-control no-border-input">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-success">
                            <i class="glyphicon glyphicon-plus-sign"></i>
                        </button>
                        <button type="button" class="btn btn-danger">
                            <i class="glyphicon glyphicon-remove-sign"></i>
                        </button>
                    </span>
                    </div>
                </div>
            </form>


            <form id="postData-form" name="postData-params" class="form-inline">
                <h5>PostData</h5>
                <div class="form-group">
                    <select name="postData-mimeType" class="form-control" style="width:200px;">
                        <option value="application/x-www-form-urlencoded" {@if postData!=undefined && postData.mimeType==="application/x-www-form-urlencoded"} selected {@/if}>x-www-form-urlencoded</option>
                        <option value="multipart/form-data" {@if postData!=undefined && postData.mimeType==="multipart/form-data"} selected {@/if}>multipart/form-data</option>
                        <option value="application/json" {@if postData!=undefined && postData.mimeType==="application/json"} selected {@/if}>application/json</option>
                    </select>
                </div>

                <!--没数据-->
                {@if postData==undefined}
                <div class="form-group" name="postData-text" style="width:100%; display:none;">
                    <textarea rows="5" class="form-control" style="width:100%;height:auto;"></textarea>
                    <p style="width:100%;font-size:12px;">必须为严格的json格式，key需用双引号包裹</p>
                </div>
                <div class="form-group pair" name="postData-params" style="display:block;">
                    <div class="input-group multi">
                        <input type="text" name="name" placeholder="name" required="" class="form-control no-border-input">
                        <input type="text" name="value" placeholder="value" class="form-control no-border-input">
                        <span class="input-group-btn">
                            <button type="button" tabindex="-1" class="btn btn-success">
                                <i class="glyphicon glyphicon-plus-sign"></i>
                            </button>
                            <button type="button" tabindex="-1" class="btn btn-danger">
                                <i class="glyphicon glyphicon-remove-sign"></i>
                            </button>
                        </span>
                    </div>
                </div>
                {@/if}


                <!--有数据的三种情况-->
                {@if postData!=undefined && postData.mimeType==="application/x-www-form-urlencoded"}
                {@each postData.params as p}
                <div class="form-group pair"  name="postData-params" style="display:block;">
                    <div class="input-group multi">
                        <input type="text" name="name" value="${p.name}" class="form-control no-border-input">
                        <input type="text" name="value" value="${p.value}" class="form-control no-border-input">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-success">
                                    <i class="glyphicon glyphicon-plus-sign"></i>
                                </button>
                                <button type="button" class="btn btn-danger">
                                    <i class="glyphicon glyphicon-remove-sign"></i>
                                </button>
                            </span>
                    </div>
                </div>
                {@/each}
                <div class="form-group" name="postData-text" style="width:100%; display:none;">
                    <textarea rows="5" class="form-control" style="width:100%;height:auto;"></textarea>
                    <p style="width:100%;font-size:12px;">必须为严格的json格式，key需用双引号包裹</p>
                </div>
                <div class="form-group pair" name="postData-params" style="display:block;">
                    <div class="input-group multi">
                        <input type="text" name="name" placeholder="name" required="" class="form-control no-border-input">
                        <input type="text" name="value" placeholder="value" class="form-control no-border-input">
                            <span class="input-group-btn">
                                <button type="button" tabindex="-1" class="btn btn-success">
                                    <i class="glyphicon glyphicon-plus-sign"></i>
                                </button>
                                <button type="button" tabindex="-1" class="btn btn-danger">
                                    <i class="glyphicon glyphicon-remove-sign"></i>
                                </button>
                            </span>
                    </div>
                </div>
                {@/if}

                {@if postData!=undefined && postData.mimeType==="multipart/form-data"}
                {@each postData.params as p}
                <div class="form-group pair"  name="postData-params" style="display:block;">
                    <div class="input-group multi">
                        <input type="text" name="name" value="${p.name}" class="form-control no-border-input">
                        <input type="text" name="value" value="${p.value}" class="form-control no-border-input">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-success">
                                    <i class="glyphicon glyphicon-plus-sign"></i>
                                </button>
                                <button type="button" class="btn btn-danger">
                                    <i class="glyphicon glyphicon-remove-sign"></i>
                                </button>
                            </span>
                    </div>
                </div>
                {@/each}
                <div class="form-group" name="postData-text" style="width:100%; display:none;">
                    <textarea rows="5" class="form-control" style="width:100%;height:auto;"></textarea>
                    <p style="width:100%;font-size:12px;">必须为严格的json格式，key需用双引号包裹</p>
                </div>
                <div class="form-group pair" name="postData-params" style="display:block;">
                    <div class="input-group multi">
                        <input type="text" name="name" placeholder="name" required="" class="form-control no-border-input">
                        <input type="text" name="value" placeholder="value" class="form-control no-border-input">
                            <span class="input-group-btn">
                                <button type="button" tabindex="-1" class="btn btn-success">
                                    <i class="glyphicon glyphicon-plus-sign"></i>
                                </button>
                                <button type="button" tabindex="-1" class="btn btn-danger">
                                    <i class="glyphicon glyphicon-remove-sign"></i>
                                </button>
                            </span>
                    </div>
                </div>
                {@/if}

                {@if postData!=undefined && postData.mimeType==="application/json"}
                <div class="form-group" name="postData-text" style="width:100%;">
                    <textarea rows="5" class="form-control" style="width:100%;height:auto;">${postData.text}</textarea>
                    <p style="width:100%;font-size:12px;">必须为严格的json格式，key需用双引号包裹</p>
                </div>
                <div class="form-group pair" name="postData-params" style="display:none;">
                    <div class="input-group multi">
                        <input type="text" name="name" placeholder="name" required="" class="form-control no-border-input">
                        <input type="text" name="value" placeholder="value" class="form-control no-border-input">
                            <span class="input-group-btn">
                                <button type="button" tabindex="-1" class="btn btn-success">
                                    <i class="glyphicon glyphicon-plus-sign"></i>
                                </button>
                                <button type="button" tabindex="-1" class="btn btn-danger">
                                    <i class="glyphicon glyphicon-remove-sign"></i>
                                </button>
                            </span>
                    </div>
                </div>
                {@/if}


            </form>

            <div id="bottom-ops" class="row">
                <a id="sendBtn"  style="width:100px;display: inline-block" class="btn btn-primary" href="javascript:void(0);">
                    <i class="glyphicon glyphicon-play-circle"></i>
                    &nbsp;<span>Send</span>
                </a>
                <a id="updateBtn" style="width:100px;display: inline-block" class="btn btn-info" href="javascript:void(0);">
                    <i class="glyphicon glyphicon-floppy-open"></i>
                    &nbsp;<span>Update</span>
                </a>
                <a id="previewBtn" style="width:80px;display: inline-block" class="btn btn-info" href="javascript:void(0);">
                    <span>Preview</span>
                </a>
                <a id="addToCollectionBtn" style="width:140px;display: inline-block" class="btn btn-info" href="javascript:void(0);">
                    <span>Add to Collection</span>
                </a>
            </div>

        </div>
        <div class="col-md-6" id="right-content">


            <h5></h5>
            <pre id="preview_code"  style="display:none;">
                <code>
                </code>
            </pre>


        </div>
    </div>



</script>


<!-- query模板 -->
<script id="harform-input-query-tpl" type="text/template">
    <div class="form-group pair">
        <div class="input-group multi">
            <input type="text" name="name" value="${name}"  class="form-control no-border-input">
            <input type="text" name="value" value="${value}" class="form-control no-border-input">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-success">
                        <i class="glyphicon glyphicon-plus-sign"></i>
                    </button>
                    <button type="button" class="btn btn-danger">
                        <i class="glyphicon glyphicon-remove-sign"></i>
                    </button>
                </span>
        </div>
    </div>
</script>

<!-- 默认的一个header -->
<script id="harform-header-for-post-tpl" type="text/template">
    <div class="form-group pair" id="for-post-header">
        <div class="input-group multi">
            <input type="text" name="name" value="Content-Type" class="form-control no-border-input">
            <input type="text" name="value" value="application/x-www-form-urlencoded"  class="form-control no-border-input">
            <span class="input-group-btn">
                <button type="button" class="btn btn-success">
                    <i class="glyphicon glyphicon-plus-sign"></i>
                </button>
                <button type="button" class="btn btn-danger">
                    <i class="glyphicon glyphicon-remove-sign"></i>
                </button>
            </span>
        </div>
    </div>
</script>


<!-- 左侧collections tree一个collection下的hars-->
<script id="collection-tree-tpl" type="text/template">
    <ul class="collection-hars" id="collection-hars-${collectionId}">
        {@if hars && hars.length>0 }
            {@each hars as h}
                <li  id="my-har-li-${h.harId}">
                    <span class="badge">${h.content.method}</span>
                    <a href="javascript:void(0);" data-id="${h.harId}" class="my-har-a">${h.name}</a>
                </li>
            {@/each}
        {@else}
            <span style="font-size:12px;">no hars</span>
        {@/if}
    </ul>
</script>

<!-- 左侧collections tree中一行har-->
<script id="single-har-tpl" type="text/template">
        <li id="my-har-li-${harId}">
            <span class="badge">${method}</span>
            <a href="javascript:void(0);" data-id="${harId}" class="my-har-a">${name}</a>
        </li>
</script>


<!-- N个collection行-->
<script id="all-collections-tpl" type="text/template">
    <ul class="list" id="my-collections">
        {@each collections as c}
            <li id="my-collection-li-${c.collectionId}"  class="my-collection-li" data-id="${c.collectionId}" data-name="${c.name}" >
                <div class="collection-name">
                    <a data-id="${c.collectionId}" href="javascript:void(0);" class="my-collection-a">${c.name}</a>
                </div>

                <div class="collection-ops">

                    <div class="dropdown" style="display:inline-block;">
                        <button id="dropdown-button-${c.collectionId}"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-default btn-xs">
                            <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                        </button>

                        <ul class="dropdown-menu" aria-labelledby="dropdown-button-${c.collectionId}">
                            <li><a href="javascript:void(0);" data-id="${c.collectionId}" class="editCollection">Edit</a></li>
                            <li><a href="javascript:void(0);" data-id="${c.collectionId}" class="importCollection">Import</a></li>
                            <li><a href="javascript:void(0);" data-id="${c.collectionId}" class="deleteCollection">Delete</a></li>
                        </ul>
                    </div>

                </div>
            </li>
        {@/each}
    </ul>
</script>

<!-- 一个collection行-->
<script id="single-collection-tpl" type="text/template">
    <li id="my-collection-li-${collectionId}"  class="my-collection-li" data-id="${collectionId}" data-name="${name}" >
        <div class="collection-name">
            <a data-id="${collectionId}" href="javascript:void(0);" class="my-collection-a">${name}</a>
        </div>

        <div class="collection-ops">
            <div class="dropdown" style="display:inline-block;">
                <button id="dropdown-button-${collectionId}"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-default btn-xs">
                    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                </button>

                <ul class="dropdown-menu" aria-labelledby="dropdown-button-${collectionId}">
                    <li><a href="javascript:void(0);" data-id="${collectionId}" class="editCollection">Edit</a></li>
                    <li><a href="javascript:void(0);" data-id="${collectionId}" class="importCollection">Import</a></li>
                    <li><a href="javascript:void(0);" data-id="${collectionId}" class="deleteCollection">Delete</a></li>
                </ul>
            </div>
            <!--<button type="button" data-id="${collectionId}" class="btn btn-default btn-xs editCollection">-->
                <!--<span class="glyphicon glyphicon-pencil" aria-hidden="true" aria-label="edit"></span>-->
            <!--</button>-->
            <!--<button type="button" data-id="${collectionId}" class="btn btn-default btn-xs importCollection">-->
                <!--<span class="glyphicon glyphicon-import" aria-hidden="true" aria-label="import"></span>-->
            <!--</button>-->
            <!--<button type="button" data-id="${collectionId}" data-name="${name}" class="btn btn-default btn-xs deleteCollection">-->
                <!--<span class="glyphicon glyphicon-remove-sign" aria-hidden="true" aria-label="delete"></span>-->
            <!--</button>-->
        </div>
    </li>
</script>

<!--包含最外面ul的一个collection行-->
<script id="single-collection-with-ul-tpl" type="text/template">
    <ul class="list" id="my-collections">
        <li id="my-collection-li-${collectionId}" class="my-collection-li" data-id="${collectionId}" data-name="${name}" >
            <div class="collection-name">
                <a data-id="${collectionId}" href="javascript:void(0);" class="my-collection-a">${name}</a>
            </div>

            <div class="collection-ops">
                <div class="dropdown" style="display:inline-block;">
                    <button id="dropdown-button-${collectionId}"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-default btn-xs">
                        <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                    </button>

                    <ul class="dropdown-menu" aria-labelledby="dropdown-button-${collectionId}">
                        <li><a href="javascript:void(0);" data-id="${collectionId}" class="editCollection">Edit</a></li>
                        <li><a href="javascript:void(0);" data-id="${collectionId}" class="importCollection">Import</a></li>
                        <li><a href="javascript:void(0);" data-id="${collectionId}" class="deleteCollection">Delete</a></li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</script>